import React from "react";
import { useNavigate, Routes, Route } from "react-router-dom";
import { ContextProvider, useAppContext } from "../../services/context";
import * as constant from "../../services/constant";
import { getItem } from "../../services/storage";
import { Permission } from "../../typing";
import { logout } from "../../services/apis";

import { Menu, Content } from "../../components/Menu"

import "./index.scss";
// import { permits } from "../../mock/data"

export default function Home() {
  const { context, setContext } = useAppContext();
  const nav = useNavigate();
  const permissions = getItem(constant.KEY_PERMITS) as string;
  const permits = JSON.parse(permissions) as Permission[];
  const home = permits.find(p=>p.parentId==="0")!
  const children = permits.filter(p=>p.parentId===home.id)
  const menuProps = {permits, children}

  const logOut = () => {
    logout();
    nav("/login", { replace: true });
  };

  return (
    <ContextProvider>
      <div className="container_home">
        <header className="header">
          <button onClick={logOut}>登出</button>
        </header>
        <main className="main">
          <aside className="aside">
            <nav>
              <Menu {...menuProps}/>
            </nav>
          </aside>
          <article className="article">
            <Routes>
              <Route path="/*" element={<Content {...menuProps} />}></Route>
            </Routes>
          </article>
        </main>
        <footer className="footer">footer...</footer>
      </div>
    </ContextProvider>
  );
}
